<template>
  <div class="app-container">
    <h1>{{ $route.query.title || 'no-name' }}</h1>
    <h3>接口说明</h3>
    <el-table
      :data="interfaceInfo"
      :show-header="false"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        align="right"
        width="200"/>
      <el-table-column
        align="left"
        prop="val"/>
    </el-table>
    <h3>请求参数</h3>
    <el-table
      :data="requestData"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        label="名称"
        width="200"/>
      <el-table-column
        label="描述"
        prop="description"/>
      <el-table-column
        label="位置"
        prop="in"/>
      <el-table-column
        label="类型"
        prop="type"/>
      <el-table-column
        label="格式"
        prop="format"/>
      <el-table-column
        label="约束"
        prop="required"/>
    </el-table>
    <h3>响应信息</h3>
    <el-table
      :data="responseData"
      border
      style="width: 100%">
      <el-table-column
        prop="name"
        align="right"
        width="200"/>
      <el-table-column
        align="left"
        prop="val"/>
    </el-table>
    <!--状态	描述	类型	格式	约束-->

  </div>
</template>

<script>
export default {
  data() {
    return {
      interfaceInfo: [],
      requestData: [],
      responseData: [],
      pathInfo: this.$store.getters.menus.paths[this.$route.query.api],
      pageInfo: {},
      methodName: ''
    }
  },
  mounted() {
    for (const key in this.pathInfo) {
      this.methodName = key
      this.pageInfo = this.pathInfo[key]
    }
    this.interfaceInfo = [
      { name: this.methodName, val: this.$route.query.api },
      { name: '请求体类型：', val: this.pageInfo.consumes },
      { name: '响应体类型：', val: this.pageInfo.produces },
      { name: '描述：', val: this.pageInfo.summary }
    ]
    this.requestData = this.pageInfo.parameters
    this.responseData = this.pageInfo.responses
  },
  methods: {
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
</style>

